<!--
所需数据：
// 景区名称
data: ['景区1', '景区2','景区3','景区4','景区5']

// 区域名称
data: ['北京（京）','天津（津）','上海（沪）','重庆（渝）','内蒙古自治区（内蒙古）','维吾尔自治区（新）','西藏自治区搜索（藏）','宁夏回族自治区（宁）','广西壮族自治区（桂）','香港特别行政区（港）','澳门特别行政区（澳）','黑龙江省（黑）','吉林省（吉）','辽宁省（辽）','河北省（冀）','山西省（晋）','青海省（青）','山东省（鲁）','河南省（豫）','江苏省（苏）','安徽省（皖）','浙江省（浙）','福建省（闽）','江西省（赣）','湖南省（湘）','湖北省（鄂）','广东省（粤）','台湾省（台）','海南省（琼）','甘肃省（甘或陇）','陕西省（陕或秦）','四川省（川或蜀）','贵州省（贵或黔）','云南省（云或滇）']

// 区域对应各景区数据
// 景区1
data: [320, 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320 , 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320]
// 景区2
data: [320, 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320 , 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320]
...
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客流来源(疆外-axis)</title>
    <!-- 引入jquery文件 -->
    <script src="../js/jquery-3.1.1.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="../js/echarts.js"></script>
</head>
<body>
<div id="chart" style="width: 800px;height:1000px;"></div>

<script>
    // JS
    var chart = echarts.init(document.getElementById('chart'));

    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['景区1', '景区2','景区3','景区4','景区5']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis:  {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: ['北京（京）','天津（津）','上海（沪）','重庆（渝）','内蒙古自治区（内蒙古）','维吾尔自治区（新）','西藏自治区搜索（藏）','宁夏回族自治区（宁）','广西壮族自治区（桂）','香港特别行政区（港）','澳门特别行政区（澳）','黑龙江省（黑）','吉林省（吉）','辽宁省（辽）','河北省（冀）','山西省（晋）','青海省（青）','山东省（鲁）','河南省（豫）','江苏省（苏）','安徽省（皖）','浙江省（浙）','福建省（闽）','江西省（赣）','湖南省（湘）','湖北省（鄂）','广东省（粤）','台湾省（台）','海南省（琼）','甘肃省（甘或陇）','陕西省（陕或秦）','四川省（川或蜀）','贵州省（贵或黔）','云南省（云或滇）']
        },
        series: [
            {
                name: '景区1',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [320, 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320 , 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320]
            },
            {
                name: '景区2',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [120, 132, 101, 134, 90, 230, 210, 320, 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320 , 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320]
            },
            {
                name: '景区3',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [220, 182, 191, 234, 290, 330, 310, 320, 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320 , 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320]
            },
            {
                name: '景区4',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [150, 212, 201, 154, 190, 330, 410, 320, 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320 , 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320]
            },
            {
                name: '景区5',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [820, 832, 901, 934, 1290, 1330, 1320, 320, 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320 , 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 320]
            }
        ]
    };

    chart.setOption(option);
</script>
</body>
</html>